<template>
	<view class="box">
		<view class="topbox">
			<view class="ipubox">
				<image src="../../static/logo.png" mode=""></image>
				<input type="text" value="" />
				<image src="../../static/logo.png" mode="" class="close"></image>
			</view>
			<text>取消</text>
		</view>
		<BaseTop :titlelist="titlelist" :flagwith="false" :current="current" @dianji="dianji"></BaseTop>
		<scroll-view @refresherpulling="onPulling" :refresher-enabled="true" style="height: 1076rpx;"
			@click="particulars" :refresher-triggered="triggered" @scrolltolower="scrolltolower"
			@refresherabort="onAbort"  @refresherrestore="onRestore"  scroll-y="true">
			<Basetwolist></Basetwolist>
		</scroll-view>
	</view>
</template>

<script>
	import BaseTop from "../../components/BaseTop/index.vue"
	import Basetwolist from "../../components/Basetwolist/index.vue"
	export default {
		data() {
			return {
				value: "",
				type: 'text',
				border: true,
				titlelist: [{
					name: "综合",
					flags: false,
					img: false //判断是否要图片
				}, {
					name: "新品",
					flag: true,
					flags: false,
					img: false //判断是否要图片
				}, {
					name: "销量",
					flag: true,
					flags: false,
					img: false //判断是否要图片
				}, {
					name: "价格",
					flag: false,
					flags: true,
					img: false //判断是否要图片
				}, {
					name: "筛选",
					flags: false, //判断是否要箭头
					img: true //判断是否要图片
				}, ],
				current: 0,
				triggered: false
			}
		},
		methods: {
			// 头部筛选框
			dianji(v) {
				this.titlelist[v].flag = !this.titlelist[v].flag
				this.current = v
			},
			// 模拟触底加载
			scrolltolower() {
				uni.showToast({
					title: "没有更多",
					icon: "none"
				})
			},
			onPulling() {
				let that = this
			},
			onRefresh() {
				let that = this
				if (this._freshing) return;
				this._freshing = true;
				setTimeout(() => {
					that.triggered = false;
					this._freshing = false;
				}, 1000)
			},
			onAbort() {
				console.log("onAbort");
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				console.log("onRestore");
			},
		},
		components: {
			BaseTop,
			Basetwolist
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad() {
			let that = this
			this._freshing = false;
			// setTimeout(() => {
			// 	that.triggered = true;
			// }, 1000)
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #FFFFFF;
	}

	.topbox {
		display: flex;
		align-items: center;
		// margin-top: 20rpx;

		.ipubox {
			display: flex;
			align-content: center;
			width: 590rpx;
			height: 68rpx;
			background-color: #ffffff;
			border-radius: 34rpx;
			padding: 20rpx 39rpx;
			box-sizing: border-box;
			margin-left: 25rpx;

			image {
				width: 26rpx;
				height: 27rpx;
			}

			.close {
				width: 30rpx;
				height: 30rpx;
			}

			input {
				width: 500rpx;
			}
		}

		text {
			margin-left: 30rpx;
			font-family: MicrosoftYaHei;
			font-size: 30rpx;
			color: #444444;
		}
	}
</style>
